{include file="public/head"/}
<style type="text/css">
	
	/* 图册产品调整样式表 */
	
	ul#sortable {
		margin: 1rem;
		padding: 0;
		list-style-type: none;
	}
	#sortable li{
		list-style-type: none;
		padding: 2px 4px;
	}
	
	#sortable .thumbnail{
		padding: 4px;
		margin-bottom: 0;
		/*/ height: 6rem;*/
	}
	
	#sortable .pro-name{
		height: 60px;
		overflow: hidden;
		margin-bottom: 4px;
	}
	#sortable .btn-sm {
		padding: 2px 12px;
		font-size: 9px;
		line-height: 1.2;
	}
	
	#sortable .label{
		padding: 2px 12px;
	}
</style>

<div class="container-fluid" id="mainopen">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
				<p></p>
            </div>
        </div>
    </div>
    <div class="ntDesktop">
        <h4 class="modal-title" id="ntModalLabel">{$title}</h4>
        <input type="hidden" name="" id="id" value="{$id|default=''}">
        <input type="hidden" name="" id="requestType" value="{$requestType|default=''}">
        <input type="hidden" name="" id="requestLang" value="{$lang|default=''}">
 		<div class="row">
            <div class="col-md-12 text-right">
				<a href="{:url('admin/album/list')}" class="btn btn-default"> <span class="fa fa-arrow-left"></span> 返回列表</a>
				<button class="btn btn-primary" style="width: 12rem" @click="saveFun"><span class="glyphicon glyphicon-floppy-disk"></span> 保存</button>
            </div>
		</div>

        <div class="row">
        	<div class="col-md-4">
				<ul class="nav nav-tabs">
					<li class="active"><a href="#album_baseInfo" data-toggle="tab">基本资料</a></li>
					<li><a href="#album_addPro" data-toggle="tab">添加产品</a></li>
				</ul>
				<div class="row tab-content" style="padding-top: 1.5rem">
					<div class="col-md-12 tab-pane active" id="album_baseInfo">
						<div class="col-md-12">
							<label for="">图册名称<span class="required"></span></label>
							<input type="text" class="form-control" v-model="data.name">
						</div>
						<div class="col-md-12">
							<label for="">副标题</label>
							<input type="text" class="form-control" v-model="data.subtitle">
						</div>
						<div class="col-md-12">
							<label for="">说明</label>
							<textarea name="" id="" cols="30" rows="3" class="form-control" v-model="data.ins"></textarea>
						</div>
						<div class="col-md-4" style="padding-top: 2rem">
							<button class="btn btn-default btn-checkbox" @click="clickisSga()">
								<input type="checkbox"> 共享图册
							</button>
						</div>
						<div v-if="data.isSga">
							<div class="col-md-4">
								<label for="">开放时间 </label>
								<div class="input-group date form_datetime"  :data-date="data.startTime" data-date-format="yyyy-mm-dd">
									<input class="form-control text-center" type="text"  v-model="data.startTime">
									<span class="input-group-addon"><span class="glyphicon glyphicon-calendar" style="margin:0"></span></span>
								</div>
							</div>
							<div class="col-md-4">
								<label for="">结束时间 </label>
								<div class="input-group date form_datetime" :data-date="data.endTime" data-date-format="yyyy-mm-dd">
									<input class="form-control text-center" type="text" v-model="data.endTime">
									<span class="input-group-addon"><span class="glyphicon glyphicon-calendar" style="margin:0"></span></span>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-12 tab-pane" id="album_addPro">
						<div class="col-md-12">
							<label for="">产品分类</label>
							<select class="form-control"  v-model="data.proClass" @change="getData({cat_id:data.proClass,request:'pro'},'proArr')">
								<option value="0">请选择</option>
								<option :value="proClass.id" v-for="(proClass,index) in proClassArr" v-html="proClass.content"></option>
							</select>
						</div>
						<div class="col-md-12">
							<label for="">搜索内容<span class="required"></span></label>
							<div class="input-group">
								<input type="text" class="form-control" placeholder="输入产品角色ID，MODEL,产品名称"  v-model="serverVal">
								<span class="input-group-btn">
									<button class="btn btn-default" @click="getData({searchText:serverVal,request:'searchText'},'proArr')">
										<span class="fa fa-search"> 查找</span>
									</button>
								</span>
							</div>
							
						</div>
						<div class="col-md-12">
							<label for="">选择产品<span class="required"></span></label>
							<select name="" id="" class="form-control" v-model="data.selpro" @change="selproFun({id:data.selpro,request:'prochar'})">
								<option value="0">{{placeholder}}</option>
								<template v-for="(proitem,index) in proArr" >
									<option :value="proitem.id"v-if="proitem.isPro">{{formatUnit(proitem.id,'ID') + (proitem.brand == '' ? '' : ' / ' +proitem.brand ) + ' / '+proitem['name_'+lang] }}</option>
									<option :value="proitem.id" v-else>{{ (proitem.brand == '' ? '' : proitem.brand +' / ') + (proitem.model==''?'':proitem.model + ' / ') + proitem['name_'+lang] + ( proitem.featureName == '' ? '' :' / '+proitem.featureName)}}</option>
								</template>
							</select>
						</div>
						<div class="col-md-12">
							<label for="">选择角色</label>
							<select name="" id="" class="form-control" v-model="data.selChr"> 
								<option value="0">{{proChr.length ? '请选择':'暂无选项'}}</option>
								<option :value="prochr.id" v-for="(prochr,index) in proChr">
									{{formatUnit(prochr.id,'ID') + (prochr.brand_name ? ' / '+prochr.brand_name :'')+ (prochr.model ? ' / '+prochr.model :'') + (prochr.pro_name ? ' / '+prochr.pro_name :'') + (prochr['content_'+lang] ? ' / '+prochr['content_'+lang] :'')}}
								</option>
							</select>
						</div>
						<div class="col-md-12 text-right" style="padding-top: 1rem">
							<button class="btn btn-primary" @click="getProchar({pro_id:data.selpro,prochar_id:data.selChr,request:'getProcharInfo'})">
								<span class="fa fa-plus-square"></span> 添加到图册
							</button>
						</div>
					</div>
				</div>
				
			</div>
			<div class="col-md-8">
				<div class="col-md-10">
					<ul class="nav nav-tabs">
						<li class="active"><a href="#">图册产品</a></li>
					</ul>
				</div>
				<div class="col-md-2 text-right" style="padding-top: 1rem">
					<div class="btn-group">
						<button type="button" class="btn btn-default">
							<span class="fa fa-sort-amount-down"></span> 排序
						</button>
						<button type="button" class="btn btn-default dropdown-toggle" 
								data-toggle="dropdown">
							<span class="caret"></span>
							<span class="sr-only">切换下拉菜单</span>
						</button>
						<ul class="dropdown-menu" role="menu">
							<li><a href="#">以添加时间排序</a></li>
							<li><a href="#">以产品分类排序</a></li>
							<li><a href="#">以产品名称排序</a></li>
							<li><a href="#">还原默认排序</a></li>
						</ul>
					</div>
				</div>
				<div class="col-md-12">
					<ul id="sortable">
						<li class="col-md-3" v-for="(item,index) in Prochar" :id="index">
							<div class="thumbnail">
								<div class="pro" style="overflow: hidden;">
									<div class="pro-icon" style="float: left;">
										<img :src="item.img_url" border="0" width="48px" height="48px" alt="PRO ICON ">
									</div>
									<div class="pro-name" style="float: left;" v-if="item.isPro">
										<small><span class="blue">{{formatUnit(item.pro_id,'ID') + " / "}}</span>{{item.brand_name == '' ? '' : item.brand_name + " / " }}:{{item.prochar_num}}</small> <br />{{item.pro_name}}
									</div>
									<div class="pro-name" style="float: left;" v-else>
										<small>{{formatUnit(item.prochar_id,'ID')}}{{item.brand_name == '' ? '' : " / "+item.brand_name }}{{item.model == '' ? '' : ' / '+item.model}}</small> <br />{{item.pro_name}}
									</div>
								</div>
								<div class="row">
									<div class="col-md-2"><span class="label label-info">{{index+1}}</span></div>
									<div class="col-md-10 text-right">
										<span class="label label-default" v-if="!item.isPro"> {{formatUnit(item.reserve,'UN')}} <small class="unit">PCS</small></span>
										<button class="btn btn-sm btn-default" @click="delProchar(index)">
											<span class="fa fa-minus-square"></span> DELETE
										</button>
									</div>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
        </div>
	</div>
</div>
<script src="/static/Admin/js/albumopen.js"></script>
{include file="public/foot"/}